<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON格式化工具</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="static/jquery-jsonview/jquery.jsonview.css" media="all">
    <style>
        .json {
            width: 99%;
            height: 600px;
        }
    </style>
</head>

<body>
<div class="layui-container" style="margin-top: 20px;">
    <div class="layui-row">
        <div class="layui-col-md5 layui-col-md-offset1">
            <textarea class=" json" id="input" name="input" placeholder="请输入JSON"></textarea>
        </div>
        <div class="layui-col-md6" contenteditable="true">

<!--            <div class="layui-textarea json" id="output"></div>-->
            <div class="layui-card">
                <div class="layui-card-header" style="background-color: #9d9d9d;">JSON输出</div>
                <div class="layui-card-body" id="output" style="border: #3c3c3c;">
                </div>
            </div>
        </div>

    </div>
</div>

<script src="static/jquery/jquery.min.js" charset="utf-8"></script>
<script src="static/jquery-jsonview/jquery.jsonview.js" charset="utf-8"></script>
<script src="static/layui/layui.js" charset="utf-8"></script>

<script>
    $('#input').on('change', function () {
        var othis = $(this);
        var input = othis.val();
        try {
            $('#output').JSONView(input, {collapsed: false, withQuotes: true});
        }catch(e) {
            alert(e.message);
        }
    })
</script>
</body>
</html>